<template>
  <view class="flex-col relative page">
    <view class="section"></view>
    <view class="flex-col section_4 view">
      <view class="flex-row justify-between self-stretch">
        <view class="flex-row self-start">
          <view class="shrink-0 section_5"></view>
          <text class="font text ml-9">中华（硬）</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_2">
          <text class="font_3 text text_3">关注</text>
        </view>
      </view>
      <text class="self-start font_3 text text_4">批发价：</text>
      <text class="self-start font_3 text text_6">行情价：</text>
    </view>
    <view class="flex-col section_4 view_2">
      <view class="flex-row justify-between items-center">
        <view class="flex-row">
          <view class="shrink-0 section_5"></view>
          <text class="font_5 text ml-9-5">历史行情</text>
        </view>
        <view class="flex-row">
          <view class="flex-col justify-start items-center text-wrapper_3">
            <text class="font_6 text text_8">1年</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_3 ml-10-5">
            <text class="font_6 text text_8">3年</text>
          </view>
        </view>
      </view>
      <image class="image_2 mt-14-5"
        src="http://ts.ysgzt.cn/static/images/wechat/resources/5cfd67559edfc2d3bb710aa677e30c19.png" />
    </view>
    <view class="flex-col section_6">
      <view class="flex-row">
        <view class="section_5"></view>
        <text class="font_5 text text_12 ml-9-5">每日行情</text>
      </view>
      <view class="flex-row justify-between group">
        <text class="font_7 text text_13">日期</text>
        <text class="font_7 text text_14">当日价格</text>
        <text class="font_7 text text_15">涨跌幅</text>
      </view>
      <view class="flex-row justify-center items-center relative group_2 view_3">
        <text class="font_8 text pos_4">2025-02-07</text>
        <text class="font_9 text">377.0</text>
        <view class="flex-row pos_5">
          <image class="shrink-0 image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
          <text class="font_9 text ml-3-5">0.35</text>
        </view>
      </view>
      <view class="flex-row justify-center relative group_3">
        <text class="font_8 text pos_6">2025-02-06</text>
        <text class="font_10 text">377.0</text>
        <view class="flex-row pos_7">
          <image class="shrink-0 image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/b8648e7e42bc7f1191ac8107348f7064.png" />
          <text class="font_10 text ml-5">0.35</text>
        </view>
      </view>
      <view class="flex-row justify-center items-center relative group_2">
        <text class="font_8 text pos_8">2025-02-05</text>
        <text class="font_9 text">377.0</text>
        <view class="flex-row pos_9">
          <image class="shrink-0 image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
          <text class="font_9 text ml-3-5">0.35</text>
        </view>
      </view>
      <view class="flex-row justify-center relative group_4">
        <text class="font_8 text pos_10">2025-02-04</text>
        <text class="font_10 text">377.0</text>
        <view class="flex-row pos_11">
          <image class="shrink-0 image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/b8648e7e42bc7f1191ac8107348f7064.png" />
          <text class="font_10 text ml-5">0.35</text>
        </view>
      </view>
      <view class="flex-col justify-start relative group_5">
        <view class="flex-row justify-center relative">
          <text class="font_8 text pos_12">2025-02-03</text>
          <text class="font_9 text">377.0</text>
          <view class="flex-row pos_13">
            <image class="shrink-0 image_3"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
            <text class="font_9 text ml-3-5">0.35</text>
          </view>
        </view>
        <text class="text text_16 pos_14">生成海报</text>
      </view>
      <view class="flex-row justify-center relative group_6">
        <text class="font_8 text pos_15">2025-02-02</text>
        <text class="font_10 text">377.0</text>
        <view class="flex-row pos_16">
          <image class="shrink-0 image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/b8648e7e42bc7f1191ac8107348f7064.png" />
          <text class="font_10 text ml-5">0.35</text>
        </view>
      </view>
    </view>
    <image class="image pos_3"
      src="http://ts.ysgzt.cn/static/images/wechat/resources/091a7d2b47c1a045b7339d0e02759320.png" />
    <view class="flex-col justify-start items-center text-wrapper pos_2">
      <text class="font text">中华（硬）</text>
    </view>
    <view class="flex-col justify-start items-center section_2 pos">
      <view class="flex-col section_3">
        <text class="self-center font_2 text text_2">选择生成图片类型</text>
        <view class="flex-col self-stretch mt-23-5">
          <view class="flex-row equal-division">
            <view class="flex-col justify-start items-center equal-division-item">
              <text class="font_4 text">出货</text>
            </view>
            <view class="flex-col justify-start items-center equal-division-item_2 ml-11">
              <text class="font_5 text text_5">接货</text>
            </view>
          </view>
          <view class="self-stretch divider"></view>
          <text class="self-start font_5 text text_7">请选择出货/接货价格</text>
          <view class="flex-col justify-start items-start self-stretch text-wrapper_4">
            <text class="font_2 text text_9">￥377.0</text>
          </view>
          <text class="self-start font_3 text text_10">今日市场价：￥377.0</text>
          <view class="flex-col justify-start items-center self-center text-wrapper_5">
            <text class="font_5 text text_11">生成</text>
          </view>
          <view class="flex-col justify-start items-center self-center text-wrapper_6">
            <text class="font_4 text">取消</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.ml-10-5 {
  margin-left: 21rpx;
}

.mt-14-5 {
  margin-top: 29rpx;
}

.mt-23-5 {
  margin-top: 47rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.ml-3-5 {
  margin-left: 7rpx;
}

.ml-9-5 {
  margin-left: 19rpx;
}

.ml-9 {
  margin-left: 18rpx;
}

.ml-11 {
  margin-left: 22rpx;
}

.page {
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    background-color: #ffffff;
    height: 185rpx;
  }

  .section_4 {
    padding: 32rpx 24rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .text-wrapper_2 {
      padding: 12rpx 0;
      background-color: #00806b;
      border-radius: 24rpx;
      width: 128rpx;
      height: 48rpx;

      .text_3 {
        color: #ffffff;
      }
    }

    .text_4 {
      margin-left: 25rpx;
      margin-top: 18rpx;
    }

    .text_6 {
      margin-left: 24rpx;
      margin-top: 41rpx;
    }

    .text-wrapper_3 {
      padding: 4rpx 0;
      background-color: #eeeeee;
      border-radius: 4rpx;
      width: 58rpx;
      height: 30rpx;
      border-left: solid 1rpx #eeeeee;
      border-right: solid 1rpx #eeeeee;
      border-top: solid 1rpx #eeeeee;
      border-bottom: solid 1rpx #eeeeee;

      .font_6 {
        font-size: 20rpx;
        font-family: PingFangSC;
        line-height: 19rpx;
        color: #011613;
      }

      .text_8 {
        line-height: 20rpx;
      }
    }

    .image_2 {
      margin-left: 24rpx;
      margin-right: 15rpx;
      width: 644rpx;
      height: 287rpx;
    }
  }

  .view {
    margin: 404rpx 10rpx 0;
  }

  .view_2 {
    margin: 16rpx 10rpx 0;
  }

  .section_6 {
    margin: 16rpx 10rpx 0;
    padding: 31rpx 20rpx 69rpx 23rpx;
    background-color: #ffffff;
    border-radius: 10rpx 10rpx 0 0;

    .text_12 {
      line-height: 27rpx;
    }

    .group {
      margin-top: 39rpx;

      .font_7 {
        font-size: 22rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
        color: #999999;
      }

      .text_13 {
        line-height: 21rpx;
      }

      .text_14 {
        line-height: 22rpx;
      }

      .text_15 {
        line-height: 22rpx;
      }
    }

    .group_2 {
      padding: 28rpx 0 21rpx;
      border-top: solid 3rpx #eeeeee;

      .pos_4 {
        position: absolute;
        left: 2rpx;
        bottom: 21rpx;
      }

      .pos_5 {
        position: absolute;
        right: 0;
        bottom: 19rpx;
      }

      .pos_8 {
        position: absolute;
        left: 2rpx;
        bottom: 21rpx;
      }

      .pos_9 {
        position: absolute;
        right: 0;
        bottom: 19rpx;
      }
    }

    .view_3 {
      margin-top: 12rpx;
    }

    .group_3 {
      padding: 28rpx 0 19rpx;
      border-top: solid 3rpx #eeeeee;

      .pos_6 {
        position: absolute;
        left: 2rpx;
        bottom: 19rpx;
      }

      .pos_7 {
        position: absolute;
        right: 0;
        bottom: 18rpx;
      }
    }

    .font_8 {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 19rpx;
      color: #011613;
    }

    .group_4 {
      padding: 28rpx 0 21rpx;
      border-top: solid 3rpx #eeeeee;
      border-bottom: solid 3rpx #eeeeee;

      .pos_10 {
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_11 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .font_10 {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 19rpx;
      color: #b01431;
    }

    .image_4 {
      width: 9rpx;
      height: 21rpx;
    }

    .group_5 {
      margin-top: 24rpx;
      padding-bottom: 26rpx;
      border-bottom: solid 3rpx #eeeeee;

      .pos_12 {
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_13 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .text_16 {
        color: #ffffff;
        font-size: 36rpx;
        font-family: PingFangSC;
        line-height: 34rpx;
      }

      .pos_14 {
        position: absolute;
        left: 50%;
        bottom: -3rpx;
        transform: translateX(-50%);
      }
    }

    .font_9 {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 19rpx;
      color: #00806b;
    }

    .image_3 {
      width: 9rpx;
      height: 22rpx;
    }

    .group_6 {
      margin-top: 21rpx;

      .pos_15 {
        position: absolute;
        left: 2rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .pos_16 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .section_5 {
    background-color: #00806b;
    width: 6rpx;
    height: 24rpx;
  }

  .font_5 {
    font-size: 28rpx;
    font-family: PingFangSC;
    line-height: 26rpx;
    color: #011613;
  }

  .text {
    text-transform: uppercase;
  }

  .image {
    width: 100vw;
    height: 53.3333vw;
  }

  .pos_3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 173rpx;
  }

  .text-wrapper {
    padding: 96rpx 0 17rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/05e0093ead41b70437e3214e578e2e5a.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pos_2 {
    position: absolute;
    left: 32rpx;
    right: 10rpx;
    top: 34rpx;
  }

  .font {
    font-size: 28rpx;
    font-family: PingFangSC;
    line-height: 28rpx;
    color: #011613;
  }

  .section_2 {
    padding: 564rpx 0 642rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/4574b702373c06b868369adad3dbcdd4.png');
    background-size: 100% 100%;

    .section_3 {
      padding: 48rpx 0;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 480rpx;

      .font_2 {
        font-size: 32rpx;
        font-family: PingFangSC;
      }

      .text_2 {
        color: #011613;
        line-height: 31rpx;
      }

      .equal-division {
        align-self: stretch;
        margin: 0 29rpx;

        .equal-division-item {
          padding: 16rpx 0;
          border-radius: 29rpx;
          background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/a7d8d25be2596555095fb2cec288d56b.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 201rpx;
          height: 60rpx;
        }

        .equal-division-item_2 {
          padding: 16rpx 0;
          border-radius: 29rpx;
          background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/b7323af66d4626fdf6d737cf602156ea.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 201rpx;
          height: 60rpx;

          .text_5 {
            color: #dfbc18;
          }
        }
      }

      .divider {
        margin-top: 29rpx;
        height: 3rpx;
        border-left: dashed 1rpx #999999;
        border-right: dashed 1rpx #999999;
        border-top: dashed 1rpx #999999;
        border-bottom: dashed 1rpx #999999;
      }

      .text_7 {
        margin-left: 33rpx;
        margin-top: 30rpx;
        color: #000000;
        line-height: 27rpx;
      }

      .text-wrapper_4 {
        margin: 24rpx 33rpx 0;
        padding: 15rpx 0;
        background-color: #eeeeee;
        border-radius: 10rpx;
        width: 416rpx;

        .text_9 {
          margin-left: 24rpx;
          color: #00806b;
          line-height: 26rpx;
        }
      }

      .text_10 {
        margin-left: 34rpx;
        margin-top: 27rpx;
        color: #000000;
      }

      .text-wrapper_5 {
        margin-top: 48rpx;
        padding: 16rpx 0;
        background-color: #00806b;
        border-radius: 29rpx;
        width: 199rpx;

        .text_11 {
          color: #ffffff;
        }
      }

      .text-wrapper_6 {
        margin-top: 31rpx;
        padding: 17rpx 0;
        border-radius: 29rpx;
        background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/01185398c665ce9d0ca3d35e5d32ac58.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 201rpx;
      }

      .font_4 {
        font-size: 28rpx;
        font-family: PingFangSC;
        line-height: 26rpx;
        color: #00806b;
      }
    }
  }

  .pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .font_3 {
    font-size: 24rpx;
    font-family: PingFangSC;
    line-height: 23rpx;
    color: #999999;
  }
}
</style>